<template>
  <div class="orderQuery-box">
    <!-- 客户订单查询 -->
    <serchForm
      :Form="clientForm"
      :FormLabel="clientFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="visitBtn"
        @click="visitLogs"
        v-show="false"
      ><i class="iconfont icon-daochu" />导出</el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="clientTableHeaderData"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      :tableData="clientTableData"
      :operate="operate"
    />

  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { getProductionItemsOrderList } from '@/api/customer'
import { ref } from 'vue';
const idActive = 'customerId'
// 显示操作栏
const operate = ref(false)
// 表单绑定属性名
let clientForm = ref({
  orderDate: '',      // 下单日期
  orderId: '',        // 订单编号
  customerName: '',   // 客户名称
  customerType: '',   // 客户类型
})
// 表单数据标题
let clientFormLabel = ref([
  {
    name: 'orderDate',
    label: '下单日期',
  },
  {
    name: 'orderId',
    label: '订单编号'
  },
  {
    name: 'customerName',
    label: '客户名称',
  },
  {
    name: 'customerType',
    label: '客户类型',
  },

])
// 查找
const onSearch = (v) => {
  pageNum.value = 1
  getProductionItemsOrderListFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
  {
    prop: 'orderDate',
    label: '下单日期',
    colorClassName: 'activeColor',
    minwidth: '110px'
  },
  {
    prop: 'orderId',
    label: '订单编号',
    colorClassName: 'activeC`olor',
    minwidth: '170px'
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor',
    minwidth: '100px'
  },
  {
    prop: 'customerType',
    label: '客户类型',
    colorClassName: 'activeColor',
    minwidth: '100px'
  },
  {
    prop: 'contactPhone',
    label: '联系电话',
    minwidth: '120px'
  },

  {
    prop: 'businessType',
    label: '业务类型',
    minwidth: '100px'

  },

  {
    prop: 'totalQuantity',
    label: '数量',
  },
  {
    prop: 'unit',
    label: '单位',
  },
  {
    prop: 'salePrice',
    label: '销售单价',
    minwidth: 100
  },
  {
    prop: 'price',
    label: '成本单价',
    minwidth: 100
  },
  {
    prop: 'totalOrderAmount',
    label: '订单总金额',
    minwidth: '100px'
  },
  {
    prop: 'invoiceStatus',
    label: '状态'
  },
  {
    prop: 'shipDate',
    label: '发货日期',
    minwidth: '100px'

  },
  {
    prop: 'shippingAddress',
    label: '配送地址',
    minwidth: '100px'

  },
  {
    prop: 'shipmentsWarehouse',
    label: '发货仓库',
    minwidth: '100px'

  },
  {
    prop: 'responsiblePerson',
    label: '负责人'
  },
  {
    prop: 'responsiblePersonPhone',
    label: '负责人电话',
    minwidth: '120px'

  },
  {
    prop: 'remarks',
    label: '备注',
  },
])
// 表格数据内容
let clientTableData = ref([


])

// 删除客户
const deleteCustomer = () => {
  console.log('删除客户');
}
// 拜访记录
const visitLogs = () => {
  console.log('拜访记录');
}

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  getProductionItemsOrderListFn(clientForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 编辑
const handleEdit = (props) => {
  let { i, v } = props
  console.log('编辑', i, v);
}
// 删除
const handleDelete = (props) => {
  let { i, v } = props
  console.log('删除', i, v);
}

const getProductionItemsOrderListFn = async (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let res = await getProductionItemsOrderList(params)
  let { code, total, rows } = res
  if (code == 200) {
    clientTableData.value = rows
    totals.value = total
  }
}
onMounted(() => {
  getProductionItemsOrderListFn()
})
</script>
<style scoped lang='scss'>
.orderQuery-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }
}
</style>
